<!--vue模板-->
<template>
  <div>
    <!--表格数据-->
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column
        label="序号"
        type="index"
        width="80"
        header-align="center"
        align="center"
      />
      <el-table-column prop="account" label="用户名" header-align="center" />
      <el-table-column
        prop="name"
        label="类型"
        width="180"
        header-align="center"
      >
        <template #default="{ row }">
          <span v-if="row.type == 1">公司员工</span>
          <span v-else-if="row.type == 2">供应商</span>
          <span v-else-if="row.type == 3">货代</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="status"
        label="状态"
        width="180"
        header-align="center"
      >
        <template #default="{ row }">
          <span v-if="row.status == 1">启用</span>
          <span v-else-if="row.type == 0">禁用</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="创建时间"
        header-align="center"
        width="180"
      />

      <el-table-column
        label="操作"
        header-align="center"
        align="center"
        width="180"
      />
    </el-table>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { Delete, Edit } from "@element-plus/icons-vue";
import { queryUser } from "@/api/users.js";
//表格数据
const tableData = ref([]);
//是否显示新增用户
const isShow = ref(false);

//方法
async function init() {
  let params = {
    page: 1,
    pageSize: 10
  };
  let res = await queryUser(params);
  if (res.code == 200) {
    tableData.value = res.data.list;
  }
}

//生命周期钩子
onBeforeMount(() => {
  init();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.toolbar {
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  padding-left: 20px;
}
</style>
